<template>
  <div style="padding-bottom: 40px;padding-top: 45px;">
    <div class="affiche"></div>
    <div class="brief">
      <div class="founder">
        <div class="avatar"></div>
        <div class="name">
          <p>创建人</p>
          <p>国泰君安广东分公司</p>
        </div>
        <div class="status">进行中</div>
      </div>
      <div class="time">
        <p>比赛时间</p>
        <p>6月1日-6月30日</p>
      </div>
      <div class="num">
        <p>比赛总人数</p>
        <p>180,000人</p>
      </div>
    </div>
    <div class="tendency">
      <div class="head">
        <span class="title">团队平均收益率走势对比</span>
        <span class="go-btn">回广场</span>     <!-- 公共组件 -->
        <div class="chart"></div>     <!-- 页面组件 -->
        <div class="folder">      <!-- 页面组件 -->
          <div v-for=""></div>
        </div>
      </div>
    </div>
    <div class="divider"></div>    <!-- 公共组件 -->
    <div class="team-list-multi stock-list">
      <div class="item hbox" v-for="">
        <div :class="trophyClass(1)"></div>
        <div class="brief">
          <p>少林派</p>
          <p>该队人数<span>9,000人</span></p>+1.23%
          <p>累计平均收益率<span>+1.23%</span></p>
        </div>
        <div class="action">
          <div>报名该队</div>
          <div>查看赛况</div>
        </div>
      </div>
    </div>
    <div class="team-list-twain">
      <div class="item" v-for=""></div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        rank: 1
      }
    },
    components: {
    },
    computed: {
    },
    methods: {
      trophyClass (rank) {
        return 'trophy-' + rank
      }
    }
  }
</script>

<style lang="less" scoped>
  .affiche {
      width: 100%;
      height: 31px;
  }

    
//   .head {
//     display: flex;
//     height: 42px;
//     line-height: 42px;

//     p {
//       margin: 0;
//     }
//   }

//   .public {
//     font-size: 16px;/*no*/
//     color: #565656;
//     padding-left: 21px;
//     position: relative;

//     &::before {
//       position: absolute;
//       left: 14px;
//       top: 15px;
//       width: 4px;
//       height: 13px;
//       border-radius: 99px;
//       background-color: #33A9F4;
//       content: '';
//     }
//   }

//   .desc {
//     font-size: 12px;/*no*/
//     color: #999;
//     padding-left: 10px;
//   }
</style>
